<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="../css/common.css" />
<script src="../js/common/jquery.js"></script>
<script src="../js/common/drag.js"></script>
<script src="../js/common/angular.min.js"></script>
<script type="text/javascript" src="../js/common/common.js"></script>
<script type="text/javascript" src="../js/directive.js"></script>
</head>
<body ng-app="myApp">

<div class="dqwz">
    <span>当前位置：</span>
    <span>AngularJS 指令(自定义)</span>
</div>

<section>
    <div>
        <h3>【通过元素名】</h3>
        <ys-directive></ys-directive>
        <!-- 查看源码开始 -->
        <div class="htmlCode">
            <span>【html源码】</span>
            <xmp>
<ys-directive></ys-directive>
            </xmp>
            <span>【js源码】</span>
            <xmp>
app.directive('ysDirective',function(){
    return{
        restrict : "E",
        template:'<h1 class="green">通过元素名创建</h1>'
    };
})
            </xmp>
            <span class="close"><a href="javascript:;">关闭</a></span>
        </div>
        <div class="viewCode">
            <span><a href="javascript:;"> >>查看源码</a></span>
        </div>
        <!-- 查看源码结束 -->
    </div>

    <div>
        <h3>【通过属性】</h3>
        <div sx-directive>
        </div>
        <!-- 查看源码开始 -->
        <div class="htmlCode">
            <span>【html源码】</span>
            <xmp>
<div sx-directive>
</div>
            </xmp>
            <span>【js源码】</span>
            <xmp>
app.directive('sxDirective',function(){
    return{
        restrict : "A",
        template:'<h1 class="green">通过属性创建</h1>'
    };
})
            </xmp>
            <span class="close"><a href="javascript:;">关闭</a></span>
        </div>
        <div class="viewCode">
            <span><a href="javascript:;"> >>查看源码</a></span>
        </div>
        <!-- 查看源码结束 -->
    </div>

    <div>
        <h3>【通过类名】</h3>
        <div class="class-directive">
        </div>
        <!-- 查看源码开始 -->
        <div class="htmlCode">
            <span>【html源码】</span>
            <xmp>
<div class="class-directive">
</div>
            </xmp>
            <span>【js源码】</span>
            <xmp>
app.directive('classDirective',function(){
    return{
        restrict : "C",
        template:'<h1 class="green">通过类名创建</h1>'
    };
})
            </xmp>
            <span class="close"><a href="javascript:;">关闭</a></span>
        </div>
        <div class="viewCode">
            <span><a href="javascript:;"> >>查看源码</a></span>
        </div>
        <!-- 查看源码结束 -->
    </div>

    <div>
        <h3>【通过注释】</h3>
        <!-- directive: zs-directive -->
        <!-- 查看源码开始 -->
        <div class="htmlCode">
            <span>【html源码】</span>
            <xmp>
<!-- directive: zs-directive -->
            </xmp>
            <span>【js源码】</span>
            <xmp>
app.directive('zsDirective',function(){
    return{
        restrict : "M",
        replace : true,
        template:'<h1 class="green">通过注释创建</h1>'
    };
})
            </xmp>
            <span class="close"><a href="javascript:;">关闭</a></span>
        </div>
        <div class="viewCode">
            <span><a href="javascript:;"> >>查看源码</a></span>
        </div>
        <!-- 查看源码结束 -->
    </div>

    <div ng-controller="mytableCtrl as mtC">
        <h3>【自定义模板】</h3>
        <mytable  name="mtC.s_name" age="mtC.s_age" height="mtC.s_height" sex="mtC.s_sex"></mytable>
        <!-- 查看源码开始 -->
        <div class="htmlCode">
            <span>【html源码】</span>
            <xmp ng-non-bindable>
<div ng-controller="mytableCtrl as mtC">
    <mytable  name="mtC.s_name" age="mtC.s_age" height="mtC.s_height" sex="mtC.s_sex"></mytable>
</div>
            </xmp>
            <span>【js源码】</span>
            <xmp>
app.directive('mytable',function(){
    return{
        restrict : "E",
        templateUrl:'../include/table.html',
        scope:{
            name:"=",
            age:"=",
            height:"=",
            sex:"="
        },
        link:function(scope,element){
            element.on('click','#getLink',function(){
                scope.link = "张三222";
                scope.$apply();
            })
        }
    };
})
app.controller('mytableCtrl',function($scope){
    this.s_name = "张三";
    this.s_age = "28";
    this.s_height = "186";
    this.s_sex = "男";
})
            </xmp>
             <span>【模板页面】</span>
            <xmp ng-non-bindable>
<table>
    <tr>
        <td>姓名:{{name}}</td>
    </tr>
    <tr>
        <td>年龄:{{age}}</td>
    </tr>
    <tr>
        <td>身高:{{height}}</td>
    </tr>
    <tr>
        <td>性别:{{sex}}</td>
    </tr>
    <tr>
        <td><button type="button" id="getLink">link的用法</button></td>
    </tr>
    <tr>
        <td>link的用法：{{link}}</td>
    </tr>
</table>
            </xmp>
            <span class="close"><a href="javascript:;">关闭</a></span>
        </div>
        <div class="viewCode">
            <span><a href="javascript:;"> >>查看源码</a></span>
        </div>
        <!-- 查看源码结束 -->
    </div>
</section>

<div class="mask_layer">
</div>

</body>
</html>